<!--
 * @Descripttion: 项目根组件
 * @Author: congz
 * @Date: 2020-06-04 11:22:40
 * @LastEditors: congz
 * @LastEditTime: 2020-09-01 14:34:14
-->

<template>
	<div id="app" name="app">
		<el-container>
			<!-- 顶部导航栏 -->
			<Header></Header>
			<!-- 顶部导航栏END -->

			<!-- 顶栏容器 -->

			<el-header v-show="$route.meta.showMenu!==false">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
					active-text-color="#ff6700" background-color="#ffffff" router>
					<div class="logo">
						<router-link to="/">
							<img src="./assets/imgs/clogo.png" alt />
						</router-link>
					</div>
					<el-menu-item index="/">首页</el-menu-item>
					<el-menu-item index="/goods">全部商品</el-menu-item>
					<div class="search">
						<el-input placeholder="请输入搜索内容" v-model="search">
							<el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
						</el-input>
					</div>
				</el-menu>
			</el-header>

			<!-- 顶栏容器END -->

			<!-- 主要区域容器 -->
			<el-main>
				<keep-alive>
					<router-view :key="key"></router-view>
				</keep-alive>
			</el-main>
			<!-- 主要区域容器END -->

			<!-- 底栏容器 -->
			<Footer></Footer>
			<!-- 底栏容器END -->
		</el-container>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import * as userAPI from '@/api/users'

	import Footer from '@/components/Footer.vue'
	import Header from '@/components/Header.vue'

	export default {
		components: {
			Footer,
			Header,
		},
		beforeUpdate() {
			this.activeIndex = this.$route.path
		},
		data() {
			return {
				activeIndex: '', // 头部导航栏选中的标签
				search: '' // 搜索条件
			}
		},
		beforeCreate() {
			document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
		},
		created() {
			// 获取浏览器localStorage，判断用户是否已经登录
			userAPI
				.checkToken(localStorage.getItem('token')).then(res => {
					// 如果已经登录，设置vuex登录状态
					if (res.code == 10000) {
						let localuser = JSON.parse(localStorage.getItem('user'));
						let user = res.data;
						if(localuser!=null&&user!=null)
							if(user.id == localuser.id)
								this.setUser(user)
					} else {
						localStorage.removeItem('user')
						localStorage.removeItem('token')
					}
				})
		},
		computed: {
			...mapGetters(['getUser', 'getNum']),
			key() {
				return this.$route.path + Math.random()
			}
		},
		methods: {
			...mapActions(['setUser']),
			// 点击搜索按钮
			searchClick() {
				if (this.search != null) {
					// 跳转到全部商品页面,并传递搜索条件
					this.$router.push({ path: "/goods", query: { search: this.search } });
					this.search = "";
				}
			}
		}
	}
</script>

<style>
	/* 全局CSS */
	* {
		padding: 0;
		margin: 0;
		border: 0;
		list-style: none;
	}

	.header-user-con {
		display: flex;
		height: 50px;
		align-items: center;
	}

	.user-name {
		margin-left: 10px;
	}

	.user-avator img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.el-dropdown-link {
		color: #fff;
		cursor: pointer;
	}

	.el-dropdown-menu__item {
		text-align: center;
	}

	.el-dropdown-item:hover {
		color: #ff6700;
	}

	#app .el-header {
		padding: 0;
	}

	#app .el-main {
		min-height: 300px;
		min-width: 1240px;
		padding: 0;
	}

	#app .el-footer {
		padding: 0;
	}

	a,
	a:hover {
		text-decoration: none;
	}

	/* 全局CSS END */



	/* 顶栏容器CSS */
	.el-header {
		margin-bottom: 20px;
		min-width: 1240px;
		background-color: #ffffff;
	}

	.el-header .el-menu {
		max-width: 1225px;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.el-header .logo {
		height: 60px;
		width: 100px;
		float: left;
		margin-right: 30px;
	}

	.el-header .logo img {
		height: 60px;
	}

	.el-header .search {
		width: 300px;
		margin-left: 600px;
	}

	/* 顶栏容器CSS END */

	
</style>
